<template>
  <view class="my-page" @touchstart="handlerTouchStart" @touchmove="handlerTouchMove" @touchend="handlerTouchEnd">
    <!-- 头部区域 -->
    <view class="header" :style="{'padding-top': topPadding+'px','padding-bottom':wideValue+'px'}">

      <!-- 个人信息部分 -->
      <view class="user-info">

        <!-- 左侧头像及信息 -->
        <view class="user-info-left-box">
          <image fit="cover" :src="login?'/static/images/loginAvatar.png':'/static/images/defaultAvatar.jpg'"
            class="user-info-avatar"></image>

          <view class="id-num-box" v-if="login">
            <view class="user-name">启嘉网</view>
            <view class="user-ids">
              <text class="user-id">ID：0001</text>
            </view>
          </view>
          <view class="login-container" v-else>
            <text class="login-btn">未登录</text>
          </view>
        </view>

        <!-- 右侧个人资料修改入口 -->
        <view class="user-info-right-box" v-if="login">
          <text class="text">个人资料</text>
          <uni-icons class="right-icon" custom-prefix="iconfont" type="icon-back" color="#fff" size="28rpx">
          </uni-icons>
        </view>
      </view>

      <!-- 个人数据部分 -->
      <view class="user-data">
        <view>
          <text>{{login?99:0}}</text>
          <text>我的文章</text>
        </view>
        </block>
        <view>
          <text>{{login?99:0}}</text>
          <text>我的关注</text>
        </view>
        <view>
          <text>{{login?99:0}}</text>
          <text>我的粉丝</text>
        </view>
      </view>
    </view>
    <!-- 圆弧和功能列表区域 -->
    <view class="drag-content" :style="{transform: 'translateY('+translateY+'px)'}">

      <!--圆弧部分 -->
      <view class="arc-container">
      </view>
      <scroll-view scroll-y="true" class="scroll-container">

        <!-- 功能列表区域 -->
        <view class="scroll-container-content">
          <view class="my-functions">

            <view>
              <uni-icons custom-prefix="iconfont" type="icon-Shopping" size="24"></uni-icons>
              <text>商品管理</text>
            </view>
            <view>
              <uni-icons custom-prefix="iconfont" type="icon-attestation" size="24"></uni-icons>
              <text>账号认证</text>
            </view>
            <view>
              <uni-icons custom-prefix="iconfont" type="icon-gift" size="24"></uni-icons>
              <text>推广有礼</text>
            </view>
            <view>
              <uni-icons custom-prefix="iconfont" type="icon-feedback" size="24"></uni-icons>
              <text>意见反馈</text>
            </view>
            <view @click="handleOpenContact">
              <uni-icons custom-prefix="iconfont" type="icon-contact" size="24"></uni-icons>
              <text>联系我们</text>
            </view>
          </view>

          <!-- 退出登录 -->
          <view class="exit-container" v-if="login">
            <view class="exit-btn">
              退出登录
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 联系我们 （弹窗）-->
    <uni-popup ref="contact" type="center">
      <view class="contact-us">
        <image class="contact-us-logo" src="/static/cat.png" mode="widthFix"></image>
        <view class="contact-us-content">
          <text class="contact-us-content-title">
            联系我们
          </text>
          <text>QQ：1020304050</text>
          <text>微信：changewechat</text>

        </view>
      </view>
    </uni-popup>

  </view>
</template>

<script>
  const wideValue = 20;
  export default {
    data() {
      return {
        login: false,
        topPadding: 0,
        moveDistance: 0, // 当前产生的距离
        moveY: 0, // 拖拽时候的Y点
        startY: 0, // 初始位置的Y点
        wideValue: wideValue,
        translateY: -1 * wideValue, // 自身Y点
      };
    },
    onReady() {
      // 获取系统信息
      const SystemInfo = uni.getSystemInfoSync();
      // 获取状态栏高度
      let statusBarHeight = SystemInfo.statusBarHeight;
      // 获取胶囊体高度
      let titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
      // 计算两者总和高度
      this.topPadding = statusBarHeight + titleBarHeight;
    },
    methods: {
      // 开始拖拽
      handlerTouchStart(event) {
        this.startY = event.touches[0].clientY
      },
      // 拖拽中
      handlerTouchMove(event) {
        this.moveY = event.touches[0].clientY
        this.moveDistance = this.moveY - this.startY
        if (this.moveDistance >= 0 && this.moveDistance < this.wideValue) {
          this.translateY = this.moveDistance - this.wideValue
        }
      },
      // 结束拖拽
      handlerTouchEnd() {
        this.translateY = -1 * this.wideValue
      },
      handleOpenContact() {
        this.$refs.contact.open()
      }
    }


  }
</script>

<style lang="scss" scoped>
  .my-page {
    background: #ffffff;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    // 整个头部区域
    .header {
      width: 100%;
      // height: 600rpx;
      background: #3FD3D1;
      overflow: hidden;

      // 用户头像信息ID区域
      .user-info {
        height: 120rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .user-info-left-box {
          width: calc(100% - 156rpx);
          height: 100%;
          display: flex;
          align-items: center;

          .user-info-avatar {
            margin-right: 32rpx;
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }

          .login-container {
            width: calc(100% - 120rpx - 32rpx);
            height: 100%;
            display: flex;

            .login-btn {
              color: white;
              line-height: 120rpx;
            }
          }


          .id-num-box {
            width: calc(100% - 120rpx - 32rpx);
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: center;
            box-sizing: border-box;

            .user-name {
              color: white;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 36rpx;
              line-height: 50rpx;
            }

            .user-ids {
              display: flex;
              align-items: center;

              .user-id {
                color: white;
                line-height: 40rpx;
                font-size: 28rpx;
                padding-right: 8rpx;
              }

              .user-tags {
                border: 2rpx solid #ffffff;
                border-radius: 8rpx;
                color: white;
                font-size: 20rpx;
                line-height: 22rpx;
                text-align: center;
                padding: 4rpx 8rpx;
                box-sizing: border-box;

              }
            }
          }

        }

        .user-info-right-box {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 156rpx;

          .text {
            color: #fff;
            font-size: 28rpx;
          }

          .right-icon {
            padding-right: 16rpx;
            transform: rotateZ(180deg);
          }
        }
      }

      // 我的关注，粉丝，资料区域
      .user-data {
        padding: 64rpx 100rpx 0rpx 100rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >view {
          display: flex;
          flex-direction: column;
          align-items: center;

          text:nth-child(1) {
            font-size: 32rpx;
            line-height: 34rpx;
            font-weight: bold;
            color: white;
          }

          text:nth-child(2) {
            font-size: 24rpx;
            line-height: 40rpx;
            color: white;
            margin-top: 16rpx;
          }
        }
      }
    }

    /* 省略其余代码 */
    .drag-content {
      background: #ffffff;
      transition: all 0.3s linear;

      //圆弧区域
      .arc-container {
        width: 840rpx;
        height: 40rpx;
        transform: translateX(-45rpx);
        background: #3FD3D1;
        border-bottom-right-radius: 375rpx 100%;
        border-bottom-left-radius: 375rpx 100%;

      }

      .scroll-container {
        height: calc(100vh - 494rpx);

        .scroll-container-content {
          padding-top: 64rpx;
          padding-bottom: 64rpx;
        }
      }

      // 功能列表区域
      .my-functions {
        width: 100%;
        background: #ffffff;
        padding: 0rpx 32rpx;
        box-sizing: border-box;

        .icon {
          width: 48rpx;
          height: 48rpx;
        }

        view {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #EEF2F4;
          padding: 32rpx 0rpx 32rpx 0rpx;

          image {
            width: 48rpx;
          }

          text {
            color: #333333;
            margin-left: 36rpx;
            font-size: 28rpx;
          }

          &:last-child {
            border-bottom: 0px solid #EEF2F4;
          }
        }
      }

      //退出登录
      .exit-container {
        padding: 0rpx 32rpx;
        box-sizing: border-box;
        width: 100%;
        padding-top: 282rpx;

        .exit-btn {
          width: 100%;
          height: 96rpx;
          border-radius: 4px;
          background: #F75454;
          color: #FFFFFF;
          font-size: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    // 联系我们
    .contact-us {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translate(-50%, -50%);

      .contact-us-logo {
        width: 70%;
        z-index: 1;
        transform: translate(-10rpx, 13px);
      }

      .contact-us-content {
        width: 100%;
        background: #ffffff;
        border-radius: 15rpx;
        padding: 80rpx 0rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .contact-us-content-title {
          position: absolute;
          top: 5rpx;
          left: 50%;
          font-size: 20rpx;
          color: #7A7A7A;
          transform: translateX(-40%);
        }

        text {
          line-height: 48rpx;
          font-size: 32rpx;
          color: #3FD3D1;

          &:last-child {
            margin-top: 30rpx;
          }
        }
      }
    }

  }
</style>
